<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head >

  <title>GHOST BUTTON</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="button.css">
  
</head>
<body >
<div class="box">
	<!-- data-xxx 代表自定义数据属性，可以通过js获取到 -->
	<div class="link link1" >
	<span class="icon"></span>
	<a href="#" class="btn" data-text="data1">
	<span class="line line-top"></span>
	<span class="line line-left"></span>
	<span class="line line-right"></span>
	<span class="line line-buttom"></span>
	BUTTON1
	</a>
	</div>
	
	<div class="link link2" >
	<span class="icon"></span>
	<a href="#"  class="btn" data-text="data2">
	<span class="line line-top"></span>
	<span class="line line-left"></span>
	<span class="line line-right"></span>
	<span class="line line-buttom"></span>
	BUTTON2
	</a>
	</div>
	
	<div class="link link3" >
	<span class="icon"></span>
	<a href="#"  class="btn" data-text="data3">
	<span class="line line-top"></span>
	<span class="line line-left"></span>
	<span class="line line-right"></span>
	<span class="line line-buttom"></span>
	BUTTON3
	</a>
	</div>
	
	<div class="tooltip">
		<em>hello</em>
		<span></span>
	</div>
</div>
<!-- jquery cdn baidu -->
<script src="https://libs.cdnjs.net/jquery/1.10.0/jquery.min.js"></script>
<script>
$(function(){
	// console.log($);
	
	$(".btn").hover(function() {
		var title = $(this).attr('data-text');
		$(".tooltip em").text(title);
		
		// 获取当前组件的左上角坐标
		var left = $(this).offset().left;
		var top = $(this).offset().top;
		var height = $(this).height();
		var width = $(this).width();
		
		$(".tooltip").css({
			left: left - ($(".tooltip").width() - width) / 2,
			top: 200
		}).animate({ // 动画
			top: top - height,
			opacity: 1
		}, 400); // 400动画持续时间
		
	}, function() {
		$(".tooltip").animate({
			opacity: 0
			
		}, 100);
	});
		
});
</script>
</body>
</html>
